<mat-card style="display: flex; ">
  <mat-card-header>
    <mat-card-title>Edit Screen</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <div class="form-container">
      <form [formGroup]="screenForm">
        <div>
          <mat-form-field>
            <mat-label>Name</mat-label>
            <input matInput formControlName="screenName" name="screenName" required>
          </mat-form-field>
        </div>
        <div>
          <mat-checkbox formControlName="alwaysOn">Always On</mat-checkbox>
          <mat-checkbox style="margin-left: 10px" formControlName="is3DRendered">3D Rendered</mat-checkbox>
        </div>
        <div *ngIf="screenForm.get('is3DRendered').value === false">
          <div>
            <mat-form-field>
              <mat-label>Model-Name</mat-label>
              <input matInput formControlName="modelName" name="modelName"
                     [appEnableControl]="screenForm.get('is3DRendered').value === false" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>RenderTarget-Name</mat-label>
              <input matInput formControlName="renderTargetName" name="renderTargetName"
                     [appEnableControl]="screenForm.get('is3DRendered').value === false" required>
            </mat-form-field>
          </div>
        </div>
        <div *ngIf="screenForm.get('is3DRendered').value === true">
          <div>
            <mat-form-field>
              <mat-label>Position X</mat-label>
              <input matInput formControlName="positionX" type="number" name="positionX"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Position Y</mat-label>
              <input matInput formControlName="positionY" name="positionY" type="number"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Position Z</mat-label>
              <input matInput formControlName="positionZ" type="number" name="positionZ"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Rotation X</mat-label>
              <input matInput formControlName="rotationX" name="rotationX" type="number"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Rotation Y</mat-label>
              <input matInput formControlName="rotationY" type="number" name="rotationY"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Rotation Z</mat-label>
              <input matInput formControlName="rotationZ" type="number" name="rotationZ"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Scale X</mat-label>
              <input matInput formControlName="scaleX" type="number" name="scaleX"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Scale Y</mat-label>
              <input matInput formControlName="scaleY" type="number" name="scaleY"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
          <div>
            <mat-form-field>
              <mat-label>Scale Z</mat-label>
              <input matInput formControlName="scaleZ" type="number" name="scaleZ"
                     [appEnableControl]="screenForm.get('is3DRendered').value === true" required>
            </mat-form-field>
          </div>
        </div>
        <div>
          <mat-label>Global Volume</mat-label>
          <mat-slider [min]="1" [max]="100" [step]="1" thumbLabel formControlName="globalVolume"></mat-slider>
          {{screenForm.get('globalVolume').value}}
        </div>
        <div>
          <mat-checkbox style="margin-left: 10px" formControlName="is3DAudioEnabled">Enable 3D Audio</mat-checkbox>
        </div>
        <div *ngIf="screenForm.get('is3DAudioEnabled').value === false">
          <div>
            <mat-label>Sound-Attenuation</mat-label>
            <mat-slider [min]="0" [max]="100" [step]="1" thumbLabel formControlName="soundAttenuation"></mat-slider>
            {{screenForm.get('soundAttenuation').value}}
          </div>
          <div>
            <mat-label>Sound Min. Distance</mat-label>
            <mat-slider [min]="1" [max]="200" [step]="1" thumbLabel formControlName="soundMinDistance"></mat-slider>
            {{screenForm.get('soundMinDistance').value}}
          </div>
          <div>
            <mat-label>Sound Max. Distance</mat-label>
            <mat-slider [min]="1" [max]="1000" [step]="10" thumbLabel formControlName="soundMaxDistance"></mat-slider>
            {{screenForm.get('soundMaxDistance').value}}
          </div>
        </div>
        <div>

        </div>
        <button style="display: flex; margin-top: -10px; float: right; margin-right: -70px" mat-raised-button
                color="accent" type="submit" (click)="submit()">Submit
        </button>
      </form>
    </div>
  </mat-card-content>
</mat-card>
